<template>
  <div class="new-music">
    <!-- 头部 -->
    <div class="tabbar-header">
      <ul>
        <li v-for="(item,index) in TarBar" :key="index" :class="{active: isActive===index}" @click="handleClick(index,item)">{{item.title}}</li>
      </ul>
    </div>
    <!-- 表格 -->
    <el-table :data="newList" border style="width: 100%" @cell-mouse-enter="handleMove" @cell-mouse-leave="handleLeave" @row-dblclick="rowClick">
      <el-table-column type="index" label="#">
      </el-table-column>

      <el-table-column label="图片" style="width: 200">
        <template v-slot="scope">
          <div @click="playMusic(scope.row)">
            <i class="iconfont icon-bofang" v-show="active===scope.row.id"></i>
            <img v-lazy="scope.row.album.picUrl" alt="" :style="{width: '100px'}">
          </div>

        </template>
      </el-table-column>

      <el-table-column label="音乐标题" prop="name">

      </el-table-column>

      <el-table-column label="歌手" prop="artists[0].name">

      </el-table-column>

      <el-table-column label="时长" align="center">
        <template v-slot="scope">
          {{scope.row.duration | formatDuration}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getNewMusic } from '@/api/newMusic'
export default {
  name: 'NewMusic',
  async created() {
    const { data: { data: res } } = await getNewMusic()
    this.newList = res
    console.log(res)
  },
  data() {
    return {
      newList: [],
      TarBar: [{ title: '全部', id: 0 }, { title: '华语', id: 7 }, { title: '欧美', id: 96 }, { title: '日本', id: 8 }, { title: '韩国', id: 16 }],
      isActive: 0,
      // 判断鼠标经过那个表格中的歌曲行
      active: 0
    }
  },
  methods: {
    // tab栏切换样式
    async handleClick(index, val) {
      this.isActive = index
      const { data: { data: res } } = await getNewMusic(val.id)
      this.newList = res
    },
    handleMove(row, column, cell, event) {
      this.active = row.id
    },
    handleLeave(row) {
      this.active = 0
    },
    rowClick(row) {
      this.playMusic(row)
    }
  }
}
</script>

<style lang="less">
.new-music {
  .tabbar-header {
    ul {
      display: flex;
      li {
        margin: 0 20px;
        cursor: pointer;
        &.active {
          color: red;
        }
      }
    }
  }
}
.el-table__row {
  .el-table__cell {
    .cell {
      position: relative;
      i {
        position: absolute;
        top: 50px;
        left: 50px;
        transform: translate(-5px, -10px);
        color: hotpink;
        font-weight: 700;
        font-size: 35px;
      }
    }
  }
}
</style>